<template>
  <div>
    <el-table :data="zxList" v-loading="loading" style="width: 92%;margin: 20px auto">
      <el-table-column prop="hash.boxnumber" label="箱子编号" sortable>
      </el-table-column>
      <el-table-column prop="hash.boxname" label="名称" sortable>
      </el-table-column>
      <el-table-column prop="hash.pickname" label="所属自提点" sortable>
      </el-table-column>
      <el-table-column prop="hash.statusname" label="状态">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="primary" v-if="scope.row.hash.status==1" @click="goZxing(scope.row)">装箱</el-button>
          <el-button type="text" size="primary" v-else style="color:#aaa"
            @click="nozx"
          >装箱</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      zxList: [],
    };
  },
  created() {
    this.getzxList();
  },
  methods: {
    goZxing(item) {
      this.$router.push({
        path: 'zxing',
        query: {
          boxnumber: item.hash.boxnumber,
        },
      });
    },
    getzxList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D15FBA0CA225A3CA18',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zxList = ts.d.data.operation1;
        for (let i = 0; i < this.zxList.length; i += 1) {
          if (this.zxList[i].hash.status == 1) {
            this.zxList[i].hash.statusname = '未出库';
          } else {
            this.zxList[i].hash.statusname = '已出库';
          }
        }
      });
    },
    nozx() {
      this.$message.error('箱子已出库,不可操作！');
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
        padding-left 25px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
</style>
